<!-- 从业者端-我的-荣誉证书-->
<template>
	<view class="container">
		
		<!-- picker弹窗 -->
		<u-picker v-model="show" :mode="mode"  @confirm="confirm"></u-picker>

		<!-- 表单区域 -->
		<view class="form-container">
			<u-form :model="form" ref="form">

        <!-- 荣誉名称 -->
<!-- 				<u-field v-model="form.honorName" label="荣誉名称：" label-width="160" prop="companyName" placeholder="请输入公司名称"
					:placeholder-style="placeholderStyle" >
				</u-field> -->
				<view class="form-section">
					<u-form-item label="荣誉名称" prop="name" label-width="160" >
						<u-input v-model="form.honorName" placeholder="请输入荣誉名称" clearable />
					</u-form-item>
				</view>

				<!-- 获得时间 -->
			<!-- 	<u-field v-model="form.honorTime" label="获得时间：" label-width="160" placeholder="请选择入职时间"
					:placeholder-style="placeholderStyle" @click="isShowPicker('starTime')">
				</u-field> -->
				<view class="form-section">
					<u-form-item label="获得时间" prop="startDate" label-width="160">
						<u-input v-model="form.honorTime" placeholder="获得时间" clearable @click="isShowPicker('starTime')" :focus="false"  disabled/>
					</u-form-item>
				</view>
				
				<!-- 荣获名次 -->
				<!-- </u-form-item> -->
<!-- 				<u-field v-model="form.honorRanking" label="荣获名次：" label-width="160" prop="companyName" placeholder="请输入职位名称"
					:placeholder-style="placeholderStyle" >
				</u-field> -->
				<view class="form-section">
					<u-form-item label="荣获名次" prop="name" label-width="160" >
						<u-input v-model="form.honorRanking" placeholder="请输入荣获名次" clearable />
					</u-form-item>
				</view>
				
				<!-- 获奖证书 -->
				<view class="form-item">
					<view class="">
						<text class="label">获奖证书</text>
					</view>
					<view class="">
						<u-upload
						  :fileList="form.photoList"
						  @on-list-change="onchange"
						  @on-remove="(e) => deletePic(e, index)"
						  name="certPhoto"
						  multiple
						  :maxCount="1"
						  width="160"
						  height="160"
						>
						  <image
						    v-if="form.photoList.length === 0"
						    src="/static/images/upload-placeholder.png"
						    class="upload-placeholder"
						  ></image>
						</u-upload>
					</view>	  
				</view>

				<!-- 荣誉介绍 -->
				<view class="introduction">
					<view class="header">
						<!-- text class="required">*</text> -->
						<text class="title">荣誉介绍</text>
					</view>
					<view class="textarea-container">
						<u-input v-model="introduction" type="textarea" placeholder="请输入荣誉介绍内容" height="600" maxlength="1000"
							@input="handleInput" :clearable="clearable" />
						<view class="word-count">
							{{ currentCount }}/1000
						</view>
					</view>
				</view>
			</u-form>

			<!-- 按钮组 -->
			<view class="button-group">
				<u-button type="default" @click="handleSubmit" plan shape="circle" :loading="loading">
					删除
				</u-button>
				<u-button type="default" @click="handleSubmit" :custom-style="btuStyle" shape="circle" :loading="loading">
					保存
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				//按钮统一色彩
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff",
					marginRight: '20rpx',
				},
				loading: false,
				clearable: false,
				// 弹出窗口内容
				show: false,
				mode: "time",
				NumberValue: 0,
				// field控件的样式
				placeholderStyle: "color:#bcbcbc",
				required: true,
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx'
				},

				form: {
					honorCode: '',
					honorName: '', ///荣誉名称
					honorTime: '', //获得时间
					honorRanking: '', ///获奖名次
					photoList: [],
				},
				photoListId:'', //临时存储图片id
				// 企业介绍输入框
				introduction: '',
				currentCount: 0,
				maxCount: 1000,
			}
		},
		onLoad(option) {
			const rycode = option.code
			this.form.honorCode = rycode

		},
		onShow() {
			if(this.form.honorCode && this.photoListId=='') {
				this.$u.api.queryjlhyry({
					jlrycode: this.form.honorCode
				}).then(res => {
					console.log('某个：', res)
					const base_info = res.data.base_info
					this.form.honorCode = base_info.jlry_code
					this.form.honorName = base_info.jlry_name
					this.form.honorTime = base_info.jlry_getdate
					this.form.honorRanking = base_info.jlry_mingci
					this.form.photoList = []
					this.form.photoList = [{
						imguri:base_info.jlry_zsimg_uri[0].imguri,
						url: base_info.jlry_zsimg_uri[0].url
					}]
					this.photoListId = this.form.photoList[0].imguri
					this.introduction = base_info.jlry_desc
					
					// console.log('onshow-honor:',this.form)
					
				})
			}
		},
		methods: {

			// 显示弹窗
			isShowPicker(value) {
				this.NumberValue = value;
				this.mode = "time"
				this.show = true
			},

			// 计算介绍内字数
			handleInput() {
				// 计算当前字数（考虑中文和符号）
				this.currentCount = this.introduction.length

				// 如果超过最大字数，截取前1000个字符
				if (this.currentCount > this.maxCount) {
					this.introduction = this.introduction.substring(0, this.maxCount)
					this.currentCount = this.maxCount
				}
			},

			// 选择确认
			confirm(e) {
				if (this.NumberValue == 'starTime') {
					this.form.honorTime = e.year+'-'+e.month+'-'+e.day;
				}
			},
			
			// 图片上传
			// afterRead(event, index) {
			//   const { file } = event
			//   // 这里模拟上传过程，实际项目中应调用上传API
			//   this.certificates[index].photoList.push({
			//     url: file.url,
			//     status: 'uploading',
			//     message: '上传中...'
			//   })			
				
			//   // 模拟上传完成
			//   setTimeout(() => {
			//     this.certificates[index].photoList[0].status = 'success'
			//     this.certificates[index].photoList[0].message = ''
			//   }, 1500)
			// },
			
			
			// 当图片变化时
			onchange(list,name) {
				if(this.form.photoList.length == 0) {
					// console.log('图片变化时-name：',name)
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						// console.log("onchange-1:", newFiles)
						// this.licenseFiles = file // 更新文件列表	
						this.form.photoList = []
						// this.certificates[name].photoList = file.url
						this.form.photoList = [...this.form.photoList, ...newFiles];
						console.log("onchange-2:", this.form)
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64()
						})					
					}
				}
				
			},
			
			// 上传Base64数据到服务器
			uploadBase64() {
				// console.log('upload:', this.base64Data)
				if (!this.base64Data) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					})
					return
				}	
				uni.showLoading({
					title: '上传中...'
				})		
				this.$u.api.uploadres({
					"usercode": uni.getStorageSync('usercode'),
					"rescode": this.base64Data,
					"restype": "0",
					"resdesc": "上传照片"
				}).then(res => {
					
					// 存储图片的ID
					this.photoListId = res.data.base_info
					console.log('uploadres-image:', this.photoListId)
				})
			},
			
			// 删除图片
			deletePic(event, index) {
			  this.form.photoList.splice(event, 1)
				// console.log('delete:',this.form)
			},


			// 上一步
			handlePrev() {
				// uni.navigateBack();
				uni.navigateTo({
					url: '/pages/Practitioner/personMesume/personMesume'
				});
			},

			// 提交
			handleSubmit() {
				console.log('提交')
				this.loading = true;					
				if(!this.form.honorCode){
					this.$u.api.createjlhyry({
						"usercode":uni.getStorageSync('usercode'),
						"jlryname": this.form.honorName,
						"jlrygetdate": this.form.honorTime,
						"jlrymingci": this.form.honorRanking,
						"jlryzsimguri":this.photoListId,
						"jlrydesc":this.introduction,
					}).then(res => {
						console.log('提交:', res);
						this.loading = false;
						uni.navigateTo({
							url: '/pages/Practitioner/personMesume/personMesume'
						});
					})
				} else {
					this.$u.api.updatejlhyry({
							"jlrycode": this.form.honorCode,
							"jlryname":this.form.honorName,
							"jlrygetdate":this.form.honorTime,
							"jlrymingci":this.form.honorRanking,
							"jlryzsimguri":this.photoListId,
							"jlrydesc":this.introduction,
					}).then(res => {
						console.log('horon-update',res)
						uni.navigateTo({
							url: '/pages/Practitioner/personMesume/personMesume'
						});
						
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		background-color: #f1f7f7;
		min-height: 100vh;

		.required {
			color: #f56c6c;
		}

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.introduction {
			padding: 10px 0rpx;
			background-color: #fff;

			.header {
				margin-bottom: 10rpx;
				display: flex;



				.title {
					// font-size: 36rpx;
					// font-weight: bold;
					color: #333;
				}
			}

			.textarea-container {
				position: relative;

				/deep/ .u-input__textarea {
					padding: 20rpx;
					background-color: #f5f5f5;
					border-radius: 10rpx;
					font-size: 28rpx;
				}

				.word-count {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					font-size: 24rpx;
					color: #999;
					background-color: rgba(245, 245, 245, 0.7);
					padding: 0 10rpx;
					border-radius: 4rpx;
				}
			}
		}


		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			/deep/ .u-field {
				padding: 10px 0;
			}

			/deep/ .u-form-item__label {
				.required {
					color: #f56c6c;
					margin-right: 4rpx;
				}
			}	

			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;
				

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 150px;
					margin-left: 15rpx;
				}

				.u-btn {
					flex: 1;
				}
			}
			
			.form-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>